<template>
  <div>
    <el-cascader
      ref="cascader"
      placeholder="可搜索"
      :options="state.regionOptions"
      :props="props"
      @change="handleChange"
      filterable
      clearable
      :collapse-tags="true"
    />
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  onMounted,
  computed,
  inject,
  reactive,
  onBeforeUnmount,
} from "vue";
import { useRegion } from "@/store/backend/SysM/region";
import { TableColumn, TableRow } from "@/utils/baTable";
import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
import type baTableClass from "@/utils/baTable";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useBusiness } from "@/store/backend/BusinessM/info";
import { useRoute, useRouter } from "vue-router";

const baTable = inject("baTable") as baTableClass;
const cascader = ref();
const region = useRegion();
const { proxy } = useCurrentInstance();
const business = useBusiness();
const route = useRoute();
const router = useRouter();

interface Region {
  address: string | null;
  addressDetail: string | null;
  areaFlag: string | null;
  areaId: number;
  areaName: string | null;
  areaNo: string | null;
  children: Region[];
  createBy: string | null;
  createTime: string | null;
  endTime: string | null;
  params: any;
  parentId: number;
  searchValue: string | null;
  startTime: string | null;
  updateBy: string | null;
  updateTime: string | null;
}
const props = {
  multiple: true,
  label: "areaName",
  value: "areaId",
  children: "children",
};
const state: { regionOptions: anyObj[] } = reactive({
  regionOptions: [], //区域列表
});

// BuildAdmin将自动为此组件传递五个Props
interface Props {
  renderValue: any; // 单元格值
  renderRow: TableRow; // 当前行数据
  renderField: TableColumn; // 当前列数据
}
const propsBA = withDefaults(defineProps<Props>(), {
  renderValue: () => {
    const region = useRegion();
    return region.regionIds + "";
  },
});
proxy.eventBus.on("clearCheckedNodes", () => {
  cascader.value.panel.clearCheckedNodes(); //清空选中的节点
  cascader.value.panel.activePath = []; // 设置为空可以让节点不高亮显示
  // if (JSON.stringify(route.query) !== "{}") {
  //   route.query = {};
  // }
});
// console.log(propsBA.renderValue, propsBA.renderRow, propsBA.renderField);
const handleChange = (value: any) => {
  //[...new Set(arr.flat(Infinity))].sort() 多维数组去重排序
  //Array.from(new Set(arr.flat(Infinity))).sort()
  console.log("value!", value, typeof value, JSON.stringify(value));

  if (JSON.stringify(value) === "[]") {
    console.log("重置B!");
    // let data = [...new Set(value.flat(Infinity))];
    baTable.comSearch.form.regions = [] + "";
  } else {
    console.log("重置Bu");
    let data = [...new Set(value.flat(Infinity))];
    baTable.comSearch.form.regions = data + "";
    // business
    //   .roleCompany(baTable.comSearch.form)
    //   .then((res: any) => {
    //     console.log("resroleCompany", res);
    //     baTable.table.loading = false;
    //     baTable.table.total = res.total;
    //     baTable.table.data = res.rows;
    //   })
    //   .catch(() => {
    //     baTable.table.loading = false;
    //   });
  }
};
onMounted(() => {
  region.getRegionByRole().then((res: any) => {
    state.regionOptions = res;
  });
});
onBeforeUnmount(() => {
  proxy.eventBus.off("clearCheckedNodes");
});
</script>
<style lang="scss" scoped></style>
